<template>
  <el-card class="form-container" shadow="never">
    <el-form ref="form" :model="model" :rules="rules" label-width="150px" style="width: 680px">
      <el-form-item label="景点名称：" prop="name">
        <el-input v-model="model.name" placeholder="请输入景点名称"/>
      </el-form-item>
      <el-form-item label="地区：" prop="version">
        <el-input v-model="model.disctrict"/>
      </el-form-item>
      <el-form-item label="地址：" prop="version">
        <el-input v-model="model.address"/>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-input v-model="model.type"/>
      </el-form-item>
      <el-form-item label="描述" style="width:850px">
        <editor v-model="model.desc"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button v-if="!id" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { get, update } from '@/api/place'
import editor from '@/components/Editor/WangEditor'
const defaultModel = {
  id: 0,
  name: '',
  disctrict: '',
  address: '',
  desc: '',
  type: ''
}
export default {
  name: 'Edit',
  components: { editor },
  data() {
    return {
      id: parseInt(this.$route.query.id),
      model: Object.assign({}, defaultModel),
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入资讯标题', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入资讯内容', trigger: 'blur' },
          { min: 0, max: 20, message: '长度在 200 个字符以内', trigger: 'blur' }
        ],
        address: [
          { min: 0, max: 200, message: '长度在 20 个字符以内', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.id) {
      get(this.id).then(response => {
        this.model = response.data.place
      })
    } else {
      this.model = Object.assign({}, defaultModel)
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.id) {
            this.model.id = this.id
            update(this.model).then(response => {
              this.$refs[formName].resetFields()
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
              this.loading = false
            })
          } /* else {
            create(this.model).then(response => {
              this.$refs[formName].resetFields()
              this.brand = Object.assign({}, defaultModel)
              this.$message({
                message: '创建成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          } */
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.brand = Object.assign({}, defaultModel)
    }
  }
}
</script>
<style>
</style>

